<html>
<meta charset="utf-8">

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('button').first().click(function () {
                var show_content = $('li').first().text();
                $('#dv_show').text(show_content);
            });
            $('button').eq(1).click(function () {
                var show_content = $('li').last().text();
                $('#dv_show').text(show_content);
            });
            $('button').eq(2).click(function () {
                var show_content = $('li').eq(2).text();
                $('#dv_show').text(show_content);
            });
            $('button').eq(3).click(function () {
                var show_content = $('li').filter('.test').text();
                $('#dv_show').text(show_content);
            });
            $('button').eq(4).click(function () {
                var show_content = $('li').not('.test').text();
                $('#dv_show').text(show_content);
            });
        });
    </script>
    <style>
        .show_css {
            width: 400px;
            height: 200px;
            background-color: peachpuff;
            color: gray;
            border: 2px solid lightslategray;
        }
    </style>
</head>
<div>
    <div class="show_css" id='dv_show'></div>
    <ul>
        <li>first()</li>
        <li>last()</li>
        <li>eq()</li>
        <li class="test"><b>filter()</b></li>
        <li>not()</li>
    </ul>
    <button>第一个元素first()</button>
    <button>最后一个元素last()</button>
    <button>按照索引获取eq(2) 选取第三个元素</button>
    <button>过滤条件filter('.test')</button>
    <button>过滤条件not('.test')</button>
</div>

</html>